<template>
    <div class="upload">
        <MyHeader />
        <CutImage v-if="imageState" />
        <Collapse>
            <Panel name="1" class="upload_panel">
                主要人员身份证照片
                <span>*</span>
                <p slot="content" v-for="(item, index) in memUploadList" :key="index">
                    <MyMemUpload :mem="item" />
                </p>
            </Panel>
            <Panel name="2" class="upload_panel">
                住所使用证明
                <span>*</span>
                <p slot="content" v-for="(item, index) in domUploadList" :key="index">
                    <MyDomUpload :multi="item" />
                </p>
            </Panel>
            <Panel name="3" class="upload_panel">
                代理机构证明文件(非必传)
                <p slot="content">
                    <MyOtherUpload :dljgList="dljgList" />
                </p>
            </Panel>
        </Collapse>
        <div class="upload_tip">
            <p>温馨提示：</p>
            <p>全程电子化系统已经为您自动生成章程，您无需再上传。</p>
        </div>
        <div class="upload_bottom">
            <div class="bottom">
                <Button type="warning" @click="saveInfo">保存</Button>
                <Button type="primary" @click="gotoNext">下一步</Button>
            </div>
            <MyFooter />
        </div>
    </div>
</template>

<script>
    import MyHeader from '../../../components/MyHeader.vue'
    import CutImage from '../../../components/CutImmage.vue'
    import MyMemUpload from './MyMemUpload.vue'
    import MyDomUpload from './MyDomUpload.vue'
    import MyOtherUpload from './MyOtherUpload.vue'
    import MyFooter from '../../../components/MyFooter.vue'
    import request from '../../../utils/request'
    export default {
        data() {
          return {
            domUploadList: [],
            memUploadList: [],
            dljgList: []
          }
        },
        computed: {
          imageState() {
            return this.$store.state.imageBase.imageState
          }
        },
        methods: {
          queryInitList() {
              request.get('/interface/apply/cp/setup/upload/queryInitList.do', {
                  'gid': sessionStorage.getItem('gid')
              }).then(response => {
                if (response.data.result === 'error') {
                    this.$ErrorAlert(response.data.message)
                    return null
                }
                // 成功逻辑
                this.domUploadList = response.data.data.domList
                this.memUploadList = response.data.data.memList
                this.dljgList = response.data.data.dljgList
              })
            },
            save(isNext) {
              request.get('/interface/apply/cp/setup/upload/saveUpload.do', {
                  gid: sessionStorage.getItem('gid')
              }).then(response => {
                  if (response.data.result === 'error') {
                      this.$ErrorAlert(response.data.message)
                  } else if (response.data.result === 'success') {
                      if (isNext) {
                          this.$router.push({name: 'CompanySupInfo'})
                      } else {
                          this.$SuccessAlert('保存成功')
                      }
                  }
              })
            },
            saveInfo() {
                this.save(false)
            },
            gotoNext() {
                this.save(true)
            }
        },
        mounted() {
            this.queryInitList()
        },
        components: {
            MyHeader,
            MyMemUpload,
            MyDomUpload,
            MyOtherUpload,
            MyFooter,
            CutImage
        }
    }
</script>

<style lang="scss">
    .upload {
        position: relative;
        min-height: 100%;
        padding-bottom: 4rem;
        background: #f3f3f3;
        .ivu-collapse {
            border: none;
            &-item {
                .ivu-collapse-header {
                    padding-left: 0;
                    height: 1.75rem;
                    line-height: 1.75rem;
                    font-weight: 700;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    i {
                        position: absolute;
                        top: 0.57rem;
                        right: 0;
                        &:before {
                            content: "\F123"
                        }
                    }
                    span {
                        color: #f86034;
                    }
                }
            }
            &-content {
                padding: 0;
                &-box {
                    padding: 0;
                }
            }
        }
        &_panel {
            padding: 0 0.54rem;
            margin-bottom: 0.54rem;
            border-bottom: 1px solid #dddee1;
            background: #fff;
            &:last-child {
                margin-bottom: 0;
            }
        }
        &_tip {
            padding: 0.54rem;
            background: #f3f3f3;
            font-size: 0.5rem;
        }
        &_bottom {
            position: absolute;
            width: 100%;
            height: 3.5rem;
            bottom: 0;
        }
    }
    .bottom {
        display: flex;
        justify-content: space-around; // padding: 0.54rem;
        button {
            width: 45%;
            padding-top: 0.36rem;
            padding-bottom: 0.36rem;
            font-size: 0.57rem;
        }
    }
</style>
